/*
 *  Usage:
 *
      <div class="loading-wave">
        <div class="loading-rect loading-rect1"></div>
        <div class="loading-rect loading-rect2"></div>
        <div class="loading-rect loading-rect3"></div>
        <div class="loading-rect loading-rect4"></div>
        <div class="loading-rect loading-rect5"></div>
      </div>
 *
 */
$loading-size:px2rem(80)  !default;
$loading-spinner-color: #ff5952 !default;
.loading-wave {
  $rectCount: 5;
  $animationDuration: 1.2s;
  $delayRange: 0.4s;

  margin: 0 auto;
  width: $loading-size * 1.25;
  height: $loading-size;
  text-align: center;
  font-size: 0;

  .loading-rect {
    background-color: $loading-spinner-color;
    height: 100%;
    width: px2rem(10);
    display: inline-block;
    margin: 0 px2rem(3);
    animation: loading-waveStretchDelay $animationDuration infinite ease-in-out;
  }

  @for $i from 1 through $rectCount {
    .loading-rect#{$i} {
      animation-delay: - $animationDuration + $delayRange / ($rectCount - 1) * ($i - 1);
    }
  }
}

@keyframes loading-waveStretchDelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1.0);
  }
}
